
import React, { Component } from "react";
import { connect } from "react-redux";
import { View, StyleSheet, TouchableOpacity, Text, FlatList, Image, Dimensions, ScrollView } from "react-native";
import { Divider, Popup, Slider, Utils, TopBar } from "tuya-panel-kit";
import TYSdk from "../../api";
import dpCodes from "../../config/dpCodes";
import Strings from "../../i18n";
import Res from "../../res";
import { debounce } from "../../utils";


const { isIphoneX, convertX: cx, convertY: cy, viewWidth } = Utils.RatioUtils;

const TYDevice = TYSdk.device;
const TYNative = TYSdk.native;

const { parseTimer, stringToSecond } = Utils.TimeUtils;
const {
  enable_time_period: enable_time_periodCode,
  repeat_cycle: repeat_cycleCode,
  light_status_on: light_status_onCode,
  light_status_mode: light_status_modeCode,
  light_status_bright: light_status_brightCode,
  light_status_flow: light_status_flowCode,
  pump_status_on: pump_status_onCode,
  pump_status_flux: pump_status_fluxCode
} = dpCodes;

class DoNotDisturbScene extends Component {
  static defaultProps = {
    dpState: {}
  };

  constructor(props) {
    super(props);
    this.state = {
      startTimeStr: null,
      endTimeStr: null,
      startTimeMin: 0,
      endTimeMin: 0,
      repeatChoose: null,
      weekChoose: null,
      weekBinaryString: null,
      weekdayString: null,
      modeList: [],
      selModeValue: false,
      selModeString: Strings.pump_switch_off,//"关闭"
      showTop:true,
    };
  }

  componentDidMount() {

    this.update();

  }

  update = debounce(v => {
    const { light_status_on, light_status_mode, repeat_cycle, enable_time_period } = this.props;

    // 开始时间 结束时间
    // console.log("时间", enable_time_period);
    let startTimeStr = '';
    let endTimeStr = '';
    let startTimeMin = 0;
    let endTimeMin = 0;
    const parts = enable_time_period.split('-');
    if (parts.length >= 2) {
      startTimeStr = parts[0].slice(0, -3);
      endTimeStr = parts[parts.length - 1].slice(0, -3);
      startTimeMin = stringToSecond(startTimeStr);
      endTimeMin = stringToSecond(endTimeStr);
      console.log('enable_time_period', enable_time_period);
      console.log('startTimeStr', startTimeStr);
      console.log('endTimeStr', endTimeStr);
      // console.log(startTimeMin);
      // console.log(endTimeMin);
    }

    // 重复周期
    console.log('重复',repeat_cycle);
    let binaryString = repeat_cycle.toString(2);
    binaryString = binaryString.padStart(7, "0"); // 字符串前面补0，7是目标长度
    console.log('binaryString', binaryString);


    // 解析星期几
    let week ;
    week = TYSdk.doNotDisturbChangeToWeekdays2(binaryString);
    console.log('week', week);
    this.setState({ weekdayString: week });


    let binary = "";
    // 把字符串的最后一个字符移动到字符串的最前面 因为第一位是周日
    // const lastChar = binaryString.slice(-1); // 获取最后一个字符
    // const newStr = binaryString.slice(0, -1); // 去掉最后一个字符
    // binary = lastChar + newStr; // 拼接新字符串
    binary = binaryString.split("").reverse().join("");// 字符串翻转 翻转后左边第一个为周一
    // console.log('binary', binary);


    let weekChoose = [];
    for (let i = 0; i < binary.length; i++) {
      if (binary[i] === "1") {
        // weekChoose = weekChoose + (i+1);
        weekChoose.push((i+1).toString());
      }
    }
    console.log('weekChoose', weekChoose);


    // 灯光 模式
    let modeList = TYSdk.getLightModeList();
    const close = {
      key: "close",
      title: Strings.light_mode_title_off,//"关闭",
      value: 'close'
    };
    modeList.unshift(close);



    this.setState({ startTimeStr, endTimeStr, startTimeMin, endTimeMin, weekChoose, modeList });
  });

  timerPopupClicked = (v => {
    console.log("时间选择", v);
    const timemin = v === 1 ? this.state.startTimeMin : this.state.endTimeMin;
    const titleStr = v === 1 ? Strings.no_disturb_on_time_title : Strings.no_disturb_off_time_title;//"时间" : "关闭时间";
    const { startTimeStr, endTimeStr } = this.state;
    let startTimeString = startTimeStr;
    let endTimeString = endTimeStr;
    Popup.timerPicker({
      title: titleStr,
      titleTextStyle:{fontSize:16,fontWeight: 'bold' },
      cancelText: Strings.cancel,//"取消",
      confirmText: Strings.ok,//"确认",
      confirmTextStyle: { fontSize: 16, fontWeight: "bold", color: "#22a8dc" },
      wrApperStyle:{ height:100 },
      startTime: timemin,
      // endTime: endTimeStr,
      is12Hours: false,
      singlePicker: true,
      symbol: "",
      onMaskPress: ({ close }) => close(),
      onConfirm: ({ startTime, endTime }, { close }) => {
        const time = parseTimer(startTime * 60);
        // console.log(startTime);
        // console.log("time", time);
        if (v === 1) {
          this.setState({ startTimeMin: startTime, startTimeStr: time });
          startTimeString = time;
        } else {
          this.setState({ endTimeMin: startTime, endTimeStr: time });
          endTimeString = time;
        }

        let timeString = startTimeString + ':00-' + endTimeString + ':00';
        TYDevice.putDeviceData({
          [enable_time_periodCode]: timeString
        }).then(r => {
          this.props.isNeedRefresh(true);// 通知上一页面刷新数据
        });
        close();
      }
    });
  });

  repeatPopupClicked = debounce(v => {
    const { repeatChoose } = this.state;
    console.log('重复选项', repeatChoose);
    const repeatData = TYSdk.repeatData();

    Popup.list({
      type: 'radio',
      contentCenter: true, // 内容是否居中
      titleTextStyle: { fontSize: 16, fontWeight: 'bold' },
      styles: { title: { fontSize: 16, fontWeight: 'bold' } },
      // cancelTextStyle: { width: 100, height: 40, borderRadius: 20, textAlign: 'center', backgroundColor: '#afd8ea' },
      confirmTextStyle: { fontSize: 16, fontWeight: 'bold', color: '#22a8dc' },
      iconTintColor: '#22a8dc',
      // switchStyle: { confirmFontColor: '#22a8dc' },
      maxItemNum: 7,
      dataSource: repeatData,
      title: Strings.dialog_title_repeating_settings,//'重复选项',
      cancelText: Strings.cancel,//'取消',
      // confirmText: '确认',
      value: repeatChoose,
      footerType: 'singleCancel',
      onMaskPress: ({ close }) => close(),
      onSelect: (value, { close }) => {
        console.log('重复选项结果', value);

        if (value === '1') {
          this.setState({ repeatChoose: value });
          this.setState({ weekdayString: Strings.repeat_value_only_once });// '执行一次'
          this.setState({ weekBinaryString: '0000000' });
          TYDevice.putDeviceData({
            [repeat_cycleCode]: 0
          }).then(r => {
            this.props.isNeedRefresh(true);// 通知上一页面刷新数据
          });
          close();
        } else if (value === '2') {
          this.setState({ repeatChoose: value });
          this.setState({ weekdayString: Strings.repeat_value_everyday });// '每天'
          this.setState({ weekBinaryString: '1111111' });
          TYDevice.putDeviceData({
            [repeat_cycleCode]: 127
          }).then(r => {
            this.props.isNeedRefresh(true);// 通知上一页面刷新数据
          });
          close();
        } else {
          close();
          // 延迟0.1秒执行
          setTimeout(() => {
            this.weekPopupClicked();
          }, 500);
        }

      },
      onConfirm: (value, { close }) => {
      },
    });
  });

  // 勿扰模式的重复周期，右边最低位是星期一
  weekPopupClicked = debounce(v => {
    const { weekChoose } = this.state;
    const { repeat_cycle } = this.props;
    console.log("重复", weekChoose);
    const repeatWeekData = TYSdk.repeatWeekData();

    Popup.list({
      type: "switch",
      contentCenter: true, // 内容是否居中
      titleTextStyle: { fontSize: 16, fontWeight: "bold" },
      styles: { title: { fontSize: 16, fontWeight: "bold" } },
      // cancelTextStyle: { width: 100, height: 40, borderRadius: 20, textAlign: 'center', backgroundColor: '#afd8ea' },
      confirmTextStyle: { fontSize: 16, fontWeight: "bold", color: "#22a8dc" },
      iconTintColor: "#22a8dc",
      // switchStyle: { confirmFontColor: '#22a8dc' },
      maxItemNum: 7,
      dataSource: repeatWeekData,
      title: Strings.dialog_title_custom_repeat,//"自定义重复",
      cancelText: Strings.cancel,//"取消",
      confirmText: Strings.ok,//"确认",
      value: weekChoose,
      // footerType: 'singleCancel',
      onMaskPress: ({ close }) => close(),
      onSelect: (value, { close }) => {
        // setState({ listValue: value });
      },
      onConfirm: (value, { close }) => {

        let repeat;
        if (value === null) {
          this.setState({ repeatChoose: '1' });
          this.setState({ weekdayString: Strings.repeat_value_only_once });// '执行一次'
          this.setState({ weekBinaryString: '0000000' });
          repeat = 0;
        }else {
          this.setState({ repeatChoose: '3' });
          console.log("重复选择结果", value);
          this.setState({ weekChoose: value });
          let binary = TYSdk.changeNumToBinaryWeek(value);
          console.log("binary", binary);
          this.setState({ weekBinaryString: binary });
          const week = TYSdk.changeToWeekdays(binary);
          console.log("week", week);
          this.setState({ weekdayString: week });

          let binary1 = TYSdk.doNotDisturbChangeNumToBinaryWeek(value);
          console.log('二进制', binary1);
          repeat = parseInt(binary1, 2);// 二进制转十进制
          console.log('十进制', repeat);
        }

        TYDevice.putDeviceData({
          [repeat_cycleCode]: repeat
        }).then(r => {
          this.props.isNeedRefresh(true);// 通知上一页面刷新数据
        });

        close();
      }
    });
  });

  modePopupClicked = (v => {
    const { light_status_on, light_status_mode } = this.props;
    const { modeList } = this.state;


    Popup.list({
      type: "radio",
      contentCenter: true, // 内容是否居中
      titleTextStyle: { fontSize: 16, fontWeight: "bold" },
      styles: { title: { fontSize: 16, fontWeight: "bold" } },
      // cancelTextStyle: { width: 100, height: 40, borderRadius: 20, textAlign: 'center', backgroundColor: '#afd8ea' },
      confirmTextStyle: { fontSize: 16, fontWeight: "bold", color: "#22a8dc" },
      iconTintColor: "#22a8dc",
      maxItemNum: 8,
      dataSource: modeList,
      title: Strings.no_disturb_light_mode_title,//"模式",
      cancelText: Strings.cancel,//"取消",
      confirmText: Strings.ok,//"确认",
      value: v,
      // footerType: 'singleCancel',
      onMaskPress: ({ close }) => close(),
      onSelect: (value, { close }) => {
        // setState({ listValue: value });
      },
      onConfirm: (value, { close }) => {
        // console.log('选择模式', value);
        if (value === 'close') {
          TYDevice.putDeviceData({
            [light_status_onCode]: false
          });
        } else {
          TYDevice.putDeviceData({
            [light_status_onCode]: true
          }).then(r => {
              TYDevice.putDeviceData({
                [light_status_modeCode]: value
              });
            }
          );
        }
        close();
      }
    });
  });

  flowSpeedPopupClicked = debounce(v => {
    Popup.list({
      type: "radio",
      titleTextStyle: { fontSize: 16, fontWeight: "bold" },
      styles: { title: { fontSize: 16, fontWeight: "bold" } },
      // cancelTextStyle: { width: 100, height: 40, borderRadius: 20, textAlign: 'center', backgroundColor: '#afd8ea' },
      confirmTextStyle: { fontSize: 16, fontWeight: "bold", color: "#22a8dc" },
      iconTintColor: "#22a8dc",
      maxItemNum: 7,
      dataSource: [
        {
          key: "1",
          title: Strings.light_speed_level_low,//"低速",
          value: "Low"
        },
        {
          key: "2",
          title: Strings.light_speed_level_medium,//"中速",
          value: "Middle"
        },
        {
          key: "3",
          title: Strings.light_speed_level_high,//"高速",
          value: "Hight"
        }
      ],
      title: Strings.light_speed_level_title,//"流光速度",
      cancelText: Strings.cancel,//"取消",
      confirmText: Strings.ok,//"确认",
      value: v,
      // footerType: 'singleCancel',
      onMaskPress: ({ close }) => close(),
      onSelect: (value, { close }) => {
        // setState({ listValue: value });
      },
      onConfirm: (value, { close }) => {
        TYDevice.putDeviceData({
          [light_status_flowCode]: value
        });
        close();
      }
    });
  });

  pumpSpeedPopupClicked = debounce(v => {

    const { pump_status_on, pump_status_flux } = this.props;
    let level = !pump_status_on || pump_status_flux;
    console.log("水泵档位", level);

    Popup.list({
      type: "radio",
      titleTextStyle: { fontSize: 16, fontWeight: "bold" },
      styles: { title: { fontSize: 16, fontWeight: "bold" } },
      // cancelTextStyle: { width: 100, height: 40, borderRadius: 20, textAlign: 'center', backgroundColor: '#afd8ea' },
      confirmTextStyle: { fontSize: 16, fontWeight: "bold", color: "#22a8dc" },
      iconTintColor: "#22a8dc",
      maxItemNum: 7,
      dataSource: [
        {
          key: "0",
          title: Strings.pump_switch_off,//"关闭",
          value: false
        },
        {
          key: "1",
          title: Strings.pump_level_1,//"1档",
          value: "Level1"
        },
        {
          key: "2",
          title: Strings.pump_level_2,//"2档",
          value: "Level2"
        },
        {
          key: "3",
          title: Strings.pump_level_3,//"3档",
          value: "Level3"
        }
      ],
      title: Strings.pump_title,//"水泵",
      cancelText: Strings.cancel,//"取消",
      confirmText: Strings.ok,//"确认",
      value: level,
      onMaskPress: ({ close }) => close(),
      onSelect: (value, { close }) => {
        // setState({ listValue: value });
      },
      onConfirm: (value, { close }) => {
        console.log('档位选择', value);
        if (value === false) {
          TYDevice.putDeviceData({
            [pump_status_onCode]: false
          });
        } else {
          TYDevice.putDeviceData({
            [pump_status_onCode]: true,
            [pump_status_fluxCode]: value
          });
        }
        close();
      }
    });
  });

// 灯光亮度
  lightView(item, index) {
    const { light_status_bright } = this.props;
    return (
      <View style={styles.lightview}>
        <Text style={[styles.cellTitle, { marginLeft: 30 }]}>{Strings.light_brightness_title}| {light_status_bright}%</Text>
        <Slider.Horizontal
          // disabled={disabled}
          // canTouchTrack={true}
          maximumValue={100}
          minimumValue={1}
          stepValue={1}
          value={light_status_bright}
          type="parcel"
          style={{ marginTop: 15, marginBottom: 10, marginLeft: 30, marginRight: 20 }}
          theme={{
            width: 300,
            height: 26,
            trackHeight: 26,
            trackRadius: 13,
            thumbTintColor: '#ffffff',
            minimumTrackTintColor: '#22a8dc',
            maximumTrackTintColor: '#E5E5E5',
          }}
          trackStyle={{
            height: 26,
            borderRadius: 13,
          }}
          thumbStyle={{
            // 会覆盖上面 theme 的thumbSize和thumbRadius
            width: 20,
            height: 20,
            borderRadius: 10,
            shadowOffset: {// 去掉滑块阴影
              width: 0,
              height: 0,
            },
            shadowOpacity: 0,
            shadowRadius: 0,
            elevation: 0,
            justifyContent: 'center',
            alignItems: 'center',
          }}
          thumbTouchSize={{ width: 26, height: 26 }}// 控制使最大最小时外圈保持正圆状态
          renderMinimumTrack={() => (
            <View
              style={{
                height: 48,
                borderRadius: 24,
                // backgroundColor: '#ac4545',
              }}>
              {/*<Text style={{ marginLeft: 20, marginTop:15, color: '#fff', }}>1</Text>*/}
            </View>
          )}
          renderMaximumTrack={() => (
            <View
              style={{
                height: 48,
                borderRadius: 24,
                // backgroundColor: '#ac4545',
              }}>
              {/*<Text style={{ alignSelf:'flex-end', marginRight: 20, marginTop:5, color: '#747474', }}>100</Text>*/}
            </View>
          )}
          onValueChange={value => {
            // this.setState({
            //   lightSet: value,
            // });
            // this.sliderClicked(value);
          }}
          onSlidingComplete={value => {
            // this.setState({
            //   lightSet: value,
            // });
            // this.sliderClicked(value);
            TYDevice.putDeviceData({
              [light_status_brightCode]: value
            });
          }}
        />
      </View>
    );
  }

  // 流光速度
  flowSpeedView(item, index) {
    const { light_status_flow } = this.props;
    let levelStr = "";
    if (light_status_flow === "Low") {
      levelStr = Strings.light_speed_level_low;//"低速";
    } else if (light_status_flow === "Middle") {
      levelStr = Strings.light_speed_level_medium;//"中速";
    } else {
      levelStr = Strings.light_speed_level_high;//"高速";
    }

    return (
      <TouchableOpacity style={styles.cell} onPress={() => {
        this.flowSpeedPopupClicked(light_status_flow);
      }}>
        <View style={styles.rowBgView}>
          <Text style={styles.cellTitle}>{Strings.light_speed_level_title}</Text>
        </View>
        <View style={styles.rowBgView}>
          <Text style={{ marginLeft: 20 }}>{levelStr}</Text>
          <Image style={styles.arrow} source={Res.enter} />
        </View>
      </TouchableOpacity>
    );
  }

  topView() {
    return (
      <TopBar.Container
        background="#FFFFFF"
        style={{ height: TopBar.height }}
        contentStyle={{ height: TopBar.height, marginTop: 10 }}
      >
        <TopBar.Action size={20} name="backIos" color="#4C4C4C" onPress={() => {
          TYSdk.Navigator.pop();
          this.props.isNeedRefresh(true);// 通知上一页面刷新数据
          }
        } />
        <TopBar.Content />
      </TopBar.Container>
    );
  }

  render() {
    const { light_status_on, light_status_mode, pump_status_on, pump_status_flux } = this.props;
    const { startTimeStr, endTimeStr, weekdayString, modeList,showTop } = this.state;

    let pumplevelStr = "";
    if (pump_status_flux === "Level1") {
      pumplevelStr = Strings.pump_level_1;//"1档";
    } else if (pump_status_flux === "Level2") {
      pumplevelStr = Strings.pump_level_2;//"2档";
    } else if (pump_status_flux === "Level3") {
      pumplevelStr = Strings.pump_level_3;//"3档";
    }
    if (pump_status_on === false) {
      pumplevelStr = Strings.pump_switch_off;//"关闭";
    }


    // 模式
    console.log('light_status_mode', light_status_mode);
    let selModeString = "";
    let selModeValue = 'close';
    if (light_status_on === false) {
      selModeString = Strings.pump_switch_off;//"关闭";
      selModeValue = 'close';
    } else {
      for (let i = 0; i < modeList.length; i++) {
        let mode = modeList[i];
        if (mode.value === light_status_mode) {
          selModeString = mode.title;
          selModeValue = mode.value;
          break;
        }
      }
    }

    return (
      <View style={[styles.container]}>
          { showTop ? this.topView() : null }
        <View
          style={{
            backgroundColor: "#FFFFFF",
            height: 60,
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "space-between"
          }}
        >
          {/* 勿扰模式 */}
          <Text style={{ marginStart: 30, fontSize: 30, color: "#333333" }}>{Strings.page_title_no_disturb}</Text>
        </View>

        <ScrollView
          showsVerticalScrollIndicator={false}
          accessibilityLabel="DoNotDisturbScene_ScrollView"
          contentContainerStyle={styles.scrollView
        }
        >
          {/* 勿扰时间 */}
          <Text style={{ marginStart: 30, height: 34, fontSize: 14, color: "#636363" }}>{Strings.no_disturb_time_group_title}</Text>

          {/* 开始时间 */}
          <TouchableOpacity
            style={styles.cell}
            onPress={() => {
              this.timerPopupClicked(1);
            }}
          >
            <Text style={styles.cellTitle}>{Strings.no_disturb_on_time_title}</Text>
            <View style={styles.rowBgView}>
              <Text style={[styles.subTitle, { marginLeft: 20 }]}>{startTimeStr}</Text>
              <Image style={styles.arrow} source={Res.enter} />
            </View>
          </TouchableOpacity>

          {/* 结束时间 */}
          <TouchableOpacity
            style={styles.cell}
            onPress={() => {
              this.timerPopupClicked(2);
            }}
          >
            <Text style={styles.cellTitle}>{Strings.no_disturb_off_time_title}</Text>
            <View style={styles.rowBgView}>
              <Text style={[styles.subTitle, { marginLeft: 20 }]}>{endTimeStr}</Text>
              <Image style={styles.arrow} source={Res.enter} />
            </View>
          </TouchableOpacity>

          {/* 重复 */}
          <TouchableOpacity
            style={styles.cell}
            onPress={() => {
              this.repeatPopupClicked();
            }}
          >
            <View style={styles.twoLines}>
              <Text style={styles.cellTitle}>{Strings.list_item_title_repeat}</Text>
              <Text style={[styles.subTitle, { marginTop: 5 }]}>{weekdayString}</Text>
            </View>
            <Image style={styles.arrow} source={Res.enter} />
          </TouchableOpacity>


          <Divider style={{ marginTop: 20, alignSelf: "center" }} color="#E5E5E5"
                   width={Dimensions.get("window").width - 40} />


          <Text style={{ marginStart: 30, marginTop: 20, fontSize: 14, color: "#333333" }}>{Strings.light_title}</Text>

          {/* 模式 */}
          <TouchableOpacity
            style={styles.cell}
            onPress={() => {
              this.modePopupClicked(selModeValue);
            }}
          >
            <Text style={styles.cellTitle}>{Strings.no_disturb_light_mode_title}</Text>
            <View style={styles.rowBgView}>
              <Text style={[styles.subTitle, { marginLeft: 20 }]}>{selModeString}</Text>
              <Image style={styles.arrow} source={Res.enter} />
            </View>
          </TouchableOpacity>

          {/* 灯光亮度 关闭、日光、水草灯时隐藏*/}
          { selModeValue === 'close' || selModeValue === 'Day' || selModeValue === 'Grass' ?  null : this.lightView() }

          {/* 流光速度 只有流光模式显示*/}
          { selModeValue === 'Flow' ? this.flowSpeedView() : null }


          <Divider style={{ marginTop: 20, alignSelf: "center" }} color="#E5E5E5"
                   width={Dimensions.get("window").width - 40} />

          <Text style={{ marginStart: 30, marginTop: 20, fontSize: 14, color: "#333333" }}>{Strings.pump_title}</Text>

          {/* 档位 */}
          <TouchableOpacity
            style={styles.cell}
            onPress={() => {
              this.pumpSpeedPopupClicked();
            }}
          >
            <Text style={styles.cellTitle}>{Strings.pump_level_title}</Text>
            <View style={styles.rowBgView}>
              <Text style={[styles.subTitle, { marginLeft: 20 }]}>{pumplevelStr}</Text>
              <Image style={styles.arrow} source={Res.enter} />
            </View>
          </TouchableOpacity>

          <Divider style={{ marginTop: 20, alignSelf: "center" }} color="#E5E5E5"
                   width={Dimensions.get("window").width - 40} />

          <Text style={{ marginStart: 30, marginTop: 20, paddingBottom: 30, marginRight:20, fontSize: 14, color: "#333333" }}>{Strings.no_disturb_desc}</Text>

        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
    // marginTop: -20,
  },
  scrollView: {},
  lightview: {
    backgroundColor: "#ffffff",
    marginTop: 20,
    height: 80,
    width: Dimensions.get("window").width - 20
  },
  cell: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    backgroundColor: "#fff",
    height: 60,
    marginStart: 30,
    marginEnd: 10,
  },
  rowBgView: {
    flexDirection: "row",
    alignItems: "center"
  },
  twoLines: {
    flexDirection: "column",
    alignItems: "stretch"
  },
  cellTitle: {
    fontSize: 16,
    fontWeight: "bold",
    color: "#000"
  },
  subTitle: {
    fontSize: 14,
    fontWeight: "normal",
    color: "#757575FF"
  },
  tackIcon: {
    width: 60,
    height: 60
  }
});

export default connect(({ dpState }) => ({
  dpState,
  enable_time_period: dpState[enable_time_periodCode],
  repeat_cycle: dpState[repeat_cycleCode],
  light_status_on: dpState[light_status_onCode],
  light_status_mode: dpState[light_status_modeCode],
  light_status_bright: dpState[light_status_brightCode],
  light_status_flow: dpState[light_status_flowCode],
  pump_status_on: dpState[pump_status_onCode],
  pump_status_flux: dpState[pump_status_fluxCode]
}))(DoNotDisturbScene);
